<template>
  <layout>
    <div class="tags">
      <router-link class="tags-item" :to="`/labels/edit/${tag.id}`" v-for="tag in tags" :key="tag.id">
        <span>{{ tag.name }}</span>
        <i class="iconfont icon-rightarrow"></i>
      </router-link>
    </div>
    <div class="createTag-wrapper">
      <Button class="createTag" @click="createTag">新建标签</Button>
    </div>
  </layout>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Button from '@/components/Button.vue';

@Component({
  components: {Button},
  computed:{
    tags(){
      return this.$store.state.tagList
    }
  }
})
export default class Labels extends Vue {

  createTag() {
    const name = window.prompt('请输入标签名');
    if (name) {
      this.$store.commit("createTag",name);
    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  background-color: #fff;
  font-size: 16px;
  padding: 0 16px;

  > .tags-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
  }
}

.createTag {

  &-wrapper {
    padding: 16px 0;
    text-align: center;
    margin-top: 44-16px;
  }
}
</style>
